import React from 'react'
import {useDispatch,useSelector} from "react-redux"
import {useEffect} from "react"
import * as action from "../action/index.js"
import { ProductCard } from 'react-vant';
import {useNavigate } from "react-router-dom"
function Shophome() {
    let navgiate = useNavigate()
    let store = useSelector((state)=>{
        console.log(state);
        return {
            ...state.shopreducer
        }
    })
    let dispatch = useDispatch()
    useEffect(()=>{
        // 1. 调用aaction里的方法
        dispatch(action.getlist())
    },[])
    const goDteatil = (item)=>{
        navgiate("/detail",{
            state:{
                item
            }
        })
    }
  return (
    <div>
        {
            store.arr && store.arr.length ?  store.arr.map((item,index)=>{
                return  <ProductCard
                key={index}
                 num={item.num}
                price={item.price}
                desc={item.desc}
                title={item.tit}
                thumb={item.img}
                onClick={()=>goDteatil(item)}
              />

            }):"暂无数据"
        }
        <div style={{height:"50px"}}></div>
    </div>
  )
}

export default Shophome